<template lang="pug">
  .clearfix
    Modal(
      width="600"
      v-model="isShowBatchImportModal"
      title="手工账单导入"
      class-name="vertical-center-modal"
    )
      .mb-15.clearfix
        Button.mr-10.pull-left(@click="downloadFile('/Content/Template/%E6%89%B9%E9%87%8F%E5%AF%BC%E5%85%A5%E6%89%8B%E5%B7%A5%E6%80%BB%E5%B8%90%E6%A8%A1%E6%9D%BF.xlsx')") 手工总账模板下载
        Upload.pull-left(
          ref="upload_2"
          :data="{CompanyId:companyId,PeriodMonth:periodMonth,PeriodYear:periodYear,Type:2}"
          :before-upload="handleBeforeUploadBatchImport_2"
          :on-success="uploadSuccessBatchImport"
          accept=".xls, .xlsx"
          :max-size="10 * 1024"
          :on-exceeded-size="handleMaxSizeTen"
          :action="upLoadUrl"
          :show-upload-list="false"
          :headers="headers"
        )
          Button(type="info" ) 总账导入
      .mb-15.clearfix
        Button.mr-10.pull-left(@click="downloadFile('/Content/Template/%E6%89%B9%E9%87%8F%E5%AF%BC%E5%85%A5%E6%89%8B%E5%B7%A5%E6%98%8E%E7%BB%86%E5%B8%90%E6%A8%A1%E6%9D%BF.xlsx')") 手工明细模板下载
        Upload.pull-left(
          ref="upload_1"
          :data="{CompanyId:companyId,PeriodMonth:periodMonth,PeriodYear:periodYear,Type:1}"
          :before-upload="handleBeforeUploadBatchImport_1"
          :on-success="uploadSuccessBatchImport"
          accept=".xls, .xlsx"
          :max-size="10 * 1024"
          :on-exceeded-size="handleMaxSizeTen"
          :action="upLoadUrl"
          :show-upload-list="false"
          :headers="headers"
        )
          Button(type="info" ) 明细导入
      .text-gray-9.pt-10.pb-10 仅支持上传10M以内的xlsx文件
      Tag(v-if="file") {{file.name}}
      div.mt-15(v-if="errorData.isError")
        Button(type="warning" @click="exportErrorTemplate") 下载错误文件

      .clearfix(slot="footer")
        Button(type="text" @click="cancel") 取消
        Button(type="primary" @click="handleSubmitBatchImport" :loading="!isCanSubmit") 确定
</template>

<script>
import { Common } from '@/utils/common.js'
import codeManageApi from '@/api/codeManage.js'
import Cookies from 'js-cookie'
import config from '@/config'
const baseUrl = process.env.NODE_ENV === 'development' ? config.baseUrl.dev : config.baseUrl.pro.replace('/api', '/')

export default {
  name: '',
  props: {
    companyId: String,
    periodMonth: Number,
    periodYear: Number,
  },

  data () {
    return {
      type: null,
      headers: {
        'Authorization': 'Bearer ' + Cookies.get('clientToken')
      },
      upLoadUrl: baseUrl + '/api/bill/ImportCustomerBill',
      isShowBatchImportModal: false,
      file: null,
      errorData: {
        errorId: '',
        isError: false,
        downLoadUrl: null
      },
      isCanSubmit: true
    }
  },

  watch: {
  },

  mounted () {
  },

  methods: {
    openModal () {
      this.isCanSubmit = true
      this.isShowBatchImportModal = true
      this.file = null
    },
    downloadFile (url) {
      if ('download' in document.createElement('a')) {
        const link = document.createElement('a')
        link.download = ''
        link.href = url
        link.click()
      }
    },
    cancel () {
      this.isShowBatchImportModal = false
      this.file = null
    },

    // 批量导入-上传前文件
    handleBeforeUploadBatchImport_1 (file) {
      this.type = 1
      const models = ['.xls', '.xlsx']
      this.errorData.isError = false
      let first = file.name.lastIndexOf(".")
      let namelength = file.name.length
      let filesuffix = file.name.substring(first, namelength)
      if (models.includes(filesuffix)) {
        this.file = file
      } else {
        this.$Message.error('文件格式不对')
      }
      return false
    },
    handleBeforeUploadBatchImport_2 (file) {
      this.type = 2
      const models = ['.xls', '.xlsx']
      this.errorData.isError = false
      let first = file.name.lastIndexOf(".")
      let namelength = file.name.length
      let filesuffix = file.name.substring(first, namelength)
      if (models.includes(filesuffix)) {
        this.file = file
      } else {
        this.$Message.error('文件格式不对')
      }
      return false
    },

    // 上传成功
    uploadSuccessBatchImport (res, row) {
      if (!res.success) {
        this.isCanSubmit = true
        this.$emit('query')
        this.$Message.error({
          content: res.message,
          duration: 10,
          closable: true
        })
        if (res.data) {
          this.errorData.isError = true
          this.errorData.downLoadUrl = baseUrl + res.data
        }
      } else {
        this.$Message.success({
          content: res.message,
          duration: 3,
          closable: true
        })
        this.errorData.isError = false
        this.file = null
        this.isShowBatchImportModal = false
        this.$emit('query')
      }
    },

    // 确定导入
    handleSubmitBatchImport () {
      this.isCanSubmit = false
      if (this.file) {
        if (this.type === 1) {
          this.$refs.upload_1.post(this.file)
        } else {
          this.$refs.upload_2.post(this.file)
        }
        // this.$emit('query')
      } else {
        this.isCanSubmit = true
        this.$Message.warning('请选择文件！')
      }
    },
    // 导出错误信息模板
    exportErrorTemplate () {
      if ('download' in document.createElement('a')) {
        const link = document.createElement('a')
        link.download = ''
        link.href = this.errorData.downLoadUrl
        link.click()
      }
    },

    handleMaxSizeTen () {
      this.$emit('handleMaxSizeTen')
    }
  }
}
</script>

<style lang="less" scope>
</style>
